<template>
    <div class="study">
        <van-cell-group>
                    <van-row>
            <van-col span="12">
                <van-field
                v-model="zuoyevalue"
                is-link
                readonly
                label="作业"
                placeholder="选择作业"
                @click="zuoyeshow = true"
                />
            </van-col>
            <van-col span="12">
                <van-field
                v-model="banjivalue"
                is-link
                readonly
                label="班级"
                placeholder="选择班级"
                @click="banjishow = true"
                />
            </van-col>
        </van-row>

        <van-row>
            <van-col span="5">
                <van-button plain type="primary">总分榜</van-button>
            </van-col>
            <van-col span="5">
                <van-button type="success">登录</van-button>
            </van-col>
            <van-col span="14">
                <van-field left-icon="search" placeholder="搜索"
                 style="border: 1px solid; border-radius: 10px;"></van-field>
            </van-col>
        </van-row>
        </van-cell-group>

        <van-cell-group>
            <p style="margin-top: 10px;">课程：前端框架项目开发</p>
            <p style="margin-top: 10px;">任务：{{ zuoyename }}</p>
        </van-cell-group>

        <van-cell-group>
            <van-row >
                <van-col span="6">学号</van-col>
                <van-col span="6">学生姓名</van-col>
                <van-col span="8">班级</van-col>
                <van-col span="4">评语</van-col>
            </van-row>
            <van-row v-for="(student, index) in students" :key="index" style="margin-top: 10px;">
                <van-col span="6">{{ student.id }}</van-col>
                <van-col span="6">{{ student.name }}</van-col>
                <van-col span="8">{{ student.class }}</van-col>
                <van-col span="4"></van-col>
            </van-row>
        </van-cell-group>


        <van-popup v-model:show="zuoyeshow" round position="top">
            <van-picker
                :columns="zuoye"
                @cancel="zuoyeshow = false"
                @confirm="onConfirm1"
            />
        </van-popup>
        <van-popup v-model:show="banjishow" round position="top">
            <van-picker
                :columns="banji"
                @cancel="banjishow = false"
                @confirm="onConfirm2"
            />
        </van-popup>

    </div>
</template>
<script setup>
import { ref } from 'vue';

const banji = [
      { text: '22软件技术3班', value: '1' },
      { text: '22软件技术1班', value: '2' },
    ];
const zuoye = [
      { text: 'vue3开发初体验', value: '1' },
      { text: 'vue3组件化开发', value: '2' },
      { text: 'vue3路由使用', value: '3' },
      { text: '电影列表项目', value: '4' },
      { text: 'vue自动化测试', value: '5' },
      { text: '状态管理pinia', value: '6' },
      { text: '使用ui组件库', value: '7' },
    ];
const students = [
    {id:22002319, name:"许志伟", class:"22软件技术一班"},
    {id:22002319, name:"许志伟", class:"22软件技术一班"},
    {id:22002319, name:"许志伟", class:"22软件技术一班"},
    {id:22002319, name:"许志伟", class:"22软件技术一班"},
    {id:22002319, name:"许志伟", class:"22软件技术一班"},
    {id:22002319, name:"许志伟", class:"22软件技术一班"},
    {id:22002319, name:"许志伟", class:"22软件技术一班"},
    {id:22002319, name:"许志伟", class:"22软件技术一班"},
    {id:22002319, name:"许志伟", class:"22软件技术一班"},
    {id:22002319, name:"许志伟", class:"22软件技术一班"},
    {id:22002319, name:"许志伟", class:"22软件技术一班"},
    {id:22002319, name:"许志伟", class:"22软件技术一班"},
    {id:22002319, name:"许志伟", class:"22软件技术一班"},
    {id:22002319, name:"许志伟", class:"22软件技术一班"},
    {id:22002319, name:"许志伟", class:"22软件技术一班"},
    {id:22002319, name:"许志伟", class:"22软件技术一班"},
    {id:22002319, name:"许志伟", class:"22软件技术一班"},
    {id:22002319, name:"许志伟", class:"22软件技术一班"},
    {id:22002319, name:"许志伟", class:"22软件技术一班"},
    {id:22002319, name:"许志伟", class:"22软件技术一班"},
    {id:22002319, name:"许志伟", class:"22软件技术一班"},
    {id:22002319, name:"许志伟", class:"22软件技术一班"},
]
    const zuoyevalue = ref('');
    const zuoyeshow = ref(false);

    const banjivalue = ref('');
    const banjishow = ref(false);

    const zuoyename = ref('');

    const onConfirm1 = ({selectedOptions}) => {
        console.log(selectedOptions);
        
      zuoyeshow.value = false;
      zuoyevalue.value = selectedOptions[0].text;
      zuoyename.value = selectedOptions[0].text;
    };
    const onConfirm2 = ({selectedOptions}) => {
        console.log(selectedOptions);
        
      banjishow.value = false;
      banjivalue.value = selectedOptions[0].text;
    };
</script>
<style>
.study{
    width: 400px;
    height: 700px;
    overflow-y: auto;
}
.van-cell__title{
    width: 30px;
}
</style>